@use "./var.scss" as vars;
@use "sass:math";
:root {
  --color-info: #{vars.$color-info};
  --color-bbb: #{vars.$color-bbb};
  --color-bgc: #{vars.$color-bgc};
  --color-tc: #{vars.$color-tc};
  --color-back: #{vars.$color-back};
  --color-back-hover: #{vars.$color-back-hover};
  --color-menu-hover-border: #{vars.$color-menu-hover-border};
  --color-overlay: #{vars.$color-overlay};
  --color-success: #{vars.$color-success};
  --color-warning: #{vars.$color-warning};
  --color-primary: #{vars.$color-primary};
  --color-error: #{vars.$color-error};
  --color-white: #{vars.$color-white};
  --color-black: #{vars.$color-black};
  --color-selected: #{vars.$color-selected};
  --color-main: #{vars.$color-main};
  --color-red: #{vars.$color-red};
  --color-yellow: #{vars.$color-yellow};
  --color-green: #{vars.$color-green};
  --color-txtb: #{vars.$color-txtb};
  --color-placeholder: #{vars.$color-placeholder};
  --color-border: #{vars.$color-border};
  --color-bkxz: #{vars.$color-bkxz};
  --color-line: #{vars.$color-line};
  --color-bklight: #{vars.$color-bklight};
  --color-text: #{vars.$color-text};
  --color-text-b: #{vars.$color-text-b};
  --color-div: #{vars.$color-div};
  --color-hover: #{vars.$color-hover};
  --color-msgbg: #{vars.$color-msgbg};
  --color-msgme: #{vars.$color-msgme};
  --color-msgyou: #{vars.$color-msgyou};
  --color-btn-border: #{vars.$color-btn-border};
  /* 背景颜色 */
  --color-gb-box-background-color: #{vars.$color-gb-box-background-color};
  /* 背景纹理边框颜色 */
  --color-gb-box-bk: #{vars.$color-gb-box-bk};
  /* 背景纹理边框顶点颜色 */
  --color-gb-box-dd: #{vars.$color-gb-box-dd};
  /* 背景纹理方块大小 */
  --size-bg-box: #{vars.$size-bg-box};
  /* 调整纹理方块边线宽度 */
  --size-bg-box-border: #{vars.$size-bg-box-border};
}
/* #region 显示、定位 */
div, view {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
[class*="mac-ico-"] {
  font-family: "mac-ico";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body, #app, page {
  width: 100%;
  height: 100%;
}
.oh, .ox, .oy, html, body, .ybl {
  overflow: hidden;
}
.oa {
  overflow: auto;
}
.ox {
  overflow-x: auto;
}
.oy {
  overflow-y: auto;
}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.ps {
  position: static;
}
.pf {
  position: fixed;
}
/* #endregion*/
/* #region flex */

.x, .xcc, .row-buttons-curd, .xsc, .elFormRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.row-buttons, .xe {
  display: flex;
  flex-direction: row-reverse;
}
.xw {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.y, .ybl, .btn, .ycc, html, body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.ye {
  display: flex;
  flex-direction: column-reverse;
}
.ww {
  flex-wrap: wrap;
}
.zs, .xsc {
  justify-content: flex-start;
}
.ze {
  justify-content: flex-end;
}
.zc, .btn, .xcc, .ycc, html {
  justify-content: center;
}
.zb, .row-buttons-curd, .row-buttons {
  justify-content: space-between;
}
.za {
  justify-content: space-around;
}
.js {
  align-items: flex-start;
}
.je {
  align-items: flex-end;
}
.jc, .btn, .xcc, .ycc, .xsc, html, body {
  align-items: center;
}
.jb {
  align-items: baseline;
}
.jst {
  align-items: stretch;
}
.as {
  align-content: flex-start;
}
.ae {
  align-content: flex-end;
}
.ac {
  align-content: center;
}
.ab {
  align-content: space-between;
}
.aa {
  align-content: space-around;
}
.ast {
  align-content: stretch;
}
.nfd {
  flex-grow: 0;
}
.nsx, .zbl {
  flex-shrink: 0;
}
.nbx {
  flex-grow: 0;
  flex-shrink: 0;
}
.nfd {
  flex-shrink: 0;
}
/* #endregion*/
/* #region 大小 */
.mf {
  max-width: 100%;
  max-height: 100%;
}
.wfm {
  min-width: 100%;
}
.whf, .fimg, .mimg, .wf, .ybl {
  width: 100%;
}
.wa {
  width: auto;
}
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w33 {
  width: 33%;
}
.w50 {
  width: 50%;
}
.w49 {
  width: 49%;
}
.w48 {
  width: 48%;
}
.whf, .fimg, .mimg, .hf {
  height: 100%;
}
.ha {
  height: auto;
}
.h50 {
  height: 50%;
}
.h40 {
  height: 40%;
}
.hfm {
  min-height: 100%;
}
.m0 {
  margin: 0;
}
.p0 {
  padding: 0;
}
.mp0 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.fg1, .ybl, .whf {
  flex-grow: 1;
}
.bmr1em::before {
  margin-right: 1em;
}
.fimg {
  object-fit: cover;
}
.mimg {
  object-fit: contain;
}
.x>.divider {
  width: 1em;
  flex-shrink: 0;
}
.y>.divider {
  height: 1em;
  flex-shrink: 0;
}
// 创建尺寸类
@for $i from 1 through 20 {
  $v: ($i - 9);
  $n: ($i - 9);
  @if $i <10 {
    $v: math.div($i, 10);
    $n: '0' + $i;
  }


  .size#{$n} {
    transform: scale($v);
  }
  .m#{$n}em {
    margin: #{$v}em;
  }
  .ml#{$n}em {
    margin-left: #{$v}em;
  }
  .mr#{$n}em {
    margin-right: #{$v}em;
  }
  .mt#{$n}em {
    margin-top: #{$v}em;
  }
  .mb#{$n}em {
    margin-bottom: #{$v}em;
  }
  .mlr#{$n}em {
    margin: 0 #{$v}em;
  }
  .mtb#{$n}em {
    margin: #{$v}em 0;
  }

  .p#{$n}em {
    padding: #{$v}em;
  }
  .pl#{$n}em {
    padding-left: #{$v}em;
  }
  .pr#{$n}em {
    padding-right: #{$v}em;
  }
  .pt#{$n}em {
    padding-top: #{$v}em;
  }
  .pb#{$n}em {
    padding-bottom: #{$v}em;
  }
  .plr#{$n}em {
    padding: 0 #{$v}em;
  }
  .ptb#{$n}em {
    padding: #{$v}em 0;
  }

  .w#{$i}em {
    width: #{$i}em;
  }
  .h#{$i}em {
    height: #{$i}em;
  }
}

/* #endregion*/
/* #region 样式 */
.vh {
  visibility: hidden;
}
.ci {
  color: vars.$color-info;
}
.cb {
  color: vars.$color-black;
}
.cr {
  color: vars.$color-red;
}
.current {
  color: vars.$color-primary;
  background-color: vars.$color-selected;
}
.bx {
  border: 1px solid vars.$color-border;
  border-radius: 4px;
  padding: 0 0.6em;
}
.btnss:hover {
  cursor: pointer;
}
.btn {
  cursor: pointer;
  background-color: vars.$color-main;
  color: vars.$color-white;
  padding: 0.4em 0.4em 0.4em 0.8em;
  letter-spacing: 0.4em;
  border-radius: 0.2em;
}
.btn-primary {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-default {
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #ccc;
}
.btn:hover, .sbss:hover {
  border: 1px solid #a5a5a5;
  box-sizing: border-box;
  border-radius: 0.5em;
  box-shadow: 0 0 10px #000;
}
.btn, .sbss, .sb {
  cursor: pointer;
}
.txt-hid {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  padding: 0 0.2em;
  background-color: #fff;
  /* flex-grow: 1; */
  width: 100%;
  /* font-weight: 700; */
  /* margin-top: 0.2em; */
}
.triangle {
  width: 1em;
  height: 1em;
  background-color: skyblue;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.r90 {
  transform: rotate(90deg);
}
.r180 {
  transform: rotate(180deg);
}
.r270 {
  transform: rotate(270deg);
}

.row-buttons {
  padding: 0.4em;
  width: 100%;
}
.row-buttons :nth-child(1) {
  color: vars.$color-primary;
}
.row-buttons :nth-child(2) {
  color: vars.$color-success;
}
.row-buttons :nth-child(3) {
  color: vars.$color-warning;
}
.row-buttons :nth-child(4) {
  color: vars.$color-error;
}
.row-buttons :last-child {
  color: vars.$color-black;
  border-right: 1px solid #00000000;
}
.row-buttons-curd {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 8em;
}
.row-buttons-curd>view:before {
  font-size: 2em;
}
.row-buttons-curd>view:nth-child(1):before {
  content: "\e645";
  color: vars.$color-primary;
}
.row-buttons-curd>view:nth-child(2):before {
  content: "\e64f";
  color: vars.$color-warning;
}
.row-buttons-curd>view:nth-child(3):before {
  content: "\e62a";
  color: vars.$color-success;
}
.row-buttons-curd>view:nth-child(4):before {
  content: "\e635";
  color: vars.$color-error;
}
.disabled, .disabled:before {
  color: vars.$color-info !important;
}
.disabled:hover {
  cursor: no-drop !important;
}
.nhh {
  white-space: nowrap;
}
.tac {
  text-align: center;
}
.a4 {
  aspect-ratio: 210 / 297;
  overflow: hidden;
  position: relative;
  background-color: vars.$color-bgc;
  color: vars.$color-tc;
}
input.uploadel {
  position: fixed;
  top: -100%;
  left: -100%;
}
/* #endregion*/
/* #region header.html */
.g-header {
  height: 6em;
  padding: 0 1em;
}
a {
  color: #428bca;
  padding: 1em 2em;
}
a:hover {
  text-decoration: revert;
  color: vars.$color-primary;
}
.g-header>.logo {
  /* width: 16em; */
  height: 100%;
}
/* #endregion */
/* #region console */
.zbl, .zbl .el-menu {
  width: 20em;
  background-color: vars.$color-back;
  overflow: hidden auto;
}
.zbl .el-menu-item:not(.is-active), .zbl .el-sub-menu__title {
  color: vars.$color-text-b;
}
.zbl .el-menu-item:hover, .zbl .el-sub-menu__title:hover {
  background-color: vars.$color-back-hover;
}
.menu-item {
  border-bottom: 2px solid vars.$color-bbb;
}
.typea {
  padding: 0.4em;
}
/* #endregion */
/* #region 修改 */
input::-webkit-input-placeholder {
  color: vars.$color-bbb;
}
input::-moz-placeholder {
  color: vars.$color-bbb;
}
input:-ms-input-placeholder {
  color: vars.$color-bbb;
}
input::-webkit-input-placeholder {
  color: vars.$color-bbb;
}
input::placeholder {
  color: vars.$color-bbb;
}
a {
  text-decoration: none;
}
.captcha {
  margin-left: 1em;
  cursor: pointer !important;
}
.bb2px {
  border-bottom: 2px solid vars.$color-main;
}
.typesnav li {
  height: fit-content;
  padding: 0.1em 0.4em;
}
.typesnav li>.el-cascader-node__label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.typesnav .el-cascader-menu__wrap {
  height: 38em;
}
.cb {
  color: vars.$color-bbb;
}
.pacc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
uni-modal, uni-toast {
  z-index: 9999 !important;
}
body>.editCanvasMask {
  width: var(--def-width) !important;
}
.editCanvasMask {
  position: absolute;
  border: 1px dashed vars.$color-info;
  object-fit: contain;
  /* pointer-events: none; */
}
.opacity07 {
  opacity: 0.7;
}
.editCanvasCurrent {
  /* border: 0.4em dashed vars.$color-success; */
  box-shadow: 0 0 1em 0.5em vars.$color-success;
}
.elFormRow>.el-form-item {
  margin-bottom: 0;
  margin-right: 1em;
}
.row>uni-input>.uni-input-wrapper>.uni-input-input {
  border: 0;
  border-bottom: 1px solid #c0c4cc;
  outline-style: none;
  height: 100%;
  padding: 0 0.4em;
  box-sizing: border-box;
  font-family: "Microsoft soft";
}
.row>uni-input>.uni-input-wrapper>.uni-input-input:focus {
  /* border: 2px solid red; */
  border-color: #f07b00;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    #f07b00;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    #f07b00;
}
/** 修复 uni下 el组件的失真 */
.el-pagination>[type="button"] {
  block-size: var(--el-component-size);
  inline-size: var(--el-component-size);
  border: initial;
  display: flex;
  justify-content: center;
  align-items: center;
}
[disabled] {
  cursor: not-allowed;
  color: gray;
}
/* #endregion 修改*/
/* #region 公共 */
.bx1 {
  border: 1px solid red;
}
.bx2 {
  border: 1px solid #0f0;
}
.shu_b:hover {
  cursor: pointer;
}
.sbbkxz::before, .sbbkxz::after {
  box-sizing: inherit;
  position: absolute;
  content: "";
  border: 0.2em solid transparent;
  width: 0;
  height: 0;
}
.sbbkxz::after {
  bottom: 0;
  right: 0;
}
.sbbkxz::before {
  top: 0;
  left: 0;
}
.sbbkxz:hover::before, .sbbkxz:hover::after {
  width: 100%;
  height: 100%;
}
.sbbkxz:hover::before {
  border-top-color: vars.$color-bkxz;
  border-right-color: vars.$color-bkxz;
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}
.sbbkxz:hover::after {
  border-bottom-color: vars.$color-bkxz;
  border-left-color: vars.$color-bkxz;
  transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}
.sbbkgl:hover {
  box-shadow: 10px 10px 99px 6px vars.$color-bklight;
}

.main-bg {
  background: url(./texture-m.svg) repeat #1c2d35;
  background-size: 2em;
}
.bct {
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
}
.bct:hover {
  background-color: transparent !important;
}
.border-light {
  border-radius: 0.4em;
  box-shadow: inset 0px 0px 10px 0px vars.$color-bklight;
}
.border-light-outset {
  border-radius: 0.4em;
  box-shadow: 0px 0px 10px 0px vars.$color-bklight;
}
.bgc {
  background-color: vars.$color-bgc;
}
.tc {
  color: vars.$color-tc;
}
/** 禁用鼠标事件 */
.pen {
  pointer-events: none;
}
/* #endregion 公共 */
/* #region 模板样式 */
.template .exbtn {
  position: absolute;
  right: 2em;
  top: 1em;
  padding: 0.2em 0.4em;
}
.template .exbtn:hover {
  border: 1px solid #a5a5a5;
  box-sizing: border-box;
  border-radius: 0.5em;
  box-shadow: 0 0 10px #000;
}
.pb, .template .pbl, .template .pbt, .template .pbr, .template .pbb {
  padding: 7%;
  position: relative;
}
.pbl {
  padding-left: 10%;
}
.pbr {
  padding-right: 10%;
}
.pbt {
  padding-top: 10%;
}
.pbb {
  padding-bottom: 10%;
}
.template .title {
  letter-spacing: 0.2em;
  font-size: 1.4em;
  width: 72%;
  white-space: pre-wrap;
  text-align: center;
  font-weight: 600;
}
.template .diver {
  width: 100%;
  height: 2px;
  background-color: #000;
  margin: 1em 0;
}
.template .line {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  white-space: nowrap;
  margin-top: 0.4em;
  position: relative;
}
.template .line>* {
  flex-shrink: 0;
}
.template .lineInput {
  height: 100%;
  border: none;
  border-bottom: 1px solid #333;
  outline: none;
  white-space: nowrap;
}
.template .lineInput input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
/* 针对所有浏览器 */
.template .lineInput::-webkit-inner-spin-button,
.template .lineInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  /* 可能需要根据实际情况调整 */
}

.template .pre {
  white-space: pre;
}

/* #endregion 模板样式 */